<template>
<win winWidth="40%" closeSize="1.6" winHeight="434px">
    <div class="container">
        <ul class="list" ref="ul">
        </ul>
    </div>
</win>
</template>
<script setup>
import { onMounted , ref} from 'vue';
import win from './PopupWindow.vue'

const props = defineProps({
    newFileList: Array
})

const sumFileList = []

const emits = defineEmits(['delFile'])

const ul = ref(null)
const addLi = function(list, index){
    for(let i = 0; i < list.length; i++){
        let li = document.createElement("li")
        // let del = document.createElement("div")
        let a = document.createElement('a')
        // del.innerHTML = '删除'
        // del.classList.add('del')
        a.innerHTML = list[i].name
        a.href = window.URL.createObjectURL(list[i])
        a.setAttribute("download", list[i].name)
        a.classList.add('fileA')
        li.appendChild(a)
        // li.appendChild(del)
        li.classList.add('lis')
        ul.value.appendChild(li)
    }
}

defineExpose({
    addLi
})
</script>
<style scoped>
.container{
    width: 86%;
    margin-top: 15%;
    height: 100%;
}
/deep/ .lis{
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    cursor: pointer;
    transition: 0.2s;
    font-family: Source Han Sans CN;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    cursor: pointer;
    align-items: center;
    color: #707070;
    line-height: 36px;
    height: 36px;
}

/deep/ .fileA{
    width: 80%;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/deep/ .lis:hover{
    opacity: 0.4;
}
/deep/ .del{
font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  cursor: pointer;
  color: #707070;
  line-height: 36px;
}


</style>